<template>
  <div class="entry_sound" :id="listData.id">
    <div class="box">
      <div class="list_text_title" v-if="title || !entry">
        <span class="text title-text">{{ Title(title) }}</span>
        <span class="handle-btn" v-if="showType">
          <span class="delete" v-if="entry && deleteShow > 1" @click="deleteSug(title)">
            <van-icon name="delete-o" class="icon" />
            删除
          </span>
        </span>
      </div>
      <div class="list_text_box">
        <!-- <div class="voice_box">
          <MyVoice
            v-for="(item, index) in listData.audioList"
            :audioId="item.id"
            :key="index"
            :audioData="item"
            @delete="deleteVoice"
            :isDelete="entry"></MyVoice>
        </div> -->
        <div class="list_text_input">
          <van-field
            class="scroe_input"
            v-model="listData.entryCont"
            rows="4"
            autosize
            type="textarea"
            v-if="entry"
            :placeholder="listData.placeholder || '若无此项内容，则不用填写；如有多条内容，可点击“添加”，逐条新增'"
            :isAt="listData.isAt || false"
            :maxlength="listData.wordLimit"
            show-word-limit />
          <div v-else v-html="removeHtmlStyle(listData.entryCont || listData.content) || '无'" class="entry_cont"></div>
        </div>
      </div>
    </div>
    <div class="list_voice_box" v-if="entry">
      <VoiceBtnFlutter
        @recordend="recordend"
        v-if="['flutter-android', 'flutter-ios', 'flutter'].includes(platform)"></VoiceBtnFlutter>
      <VoiceBtn @recordend="recordend" v-else></VoiceBtn>
    </div>
  </div>
</template>

<script>
import MyVoice from '@com/MyVoice'
import VoiceBtn from '@com/VoiceBtn'
import VoiceBtnFlutter from '@com/VoiceBtnFlutter'
import { mapState } from 'vuex'
export default {
  name: 'BoardSimple',
  components: {
    MyVoice,
    VoiceBtn,
    VoiceBtnFlutter,
  },
  props: {
    listData: {
      type: Object,
      default: () => {
        return {
          entryCont: '输入内容',
          audioList: [],
        }
      },
    },
    entry: {
      type: Boolean,
      default: true,
    },
    title: {
      type: [Number, String],
      default: '',
    },
    deleteShow: {
      type: Number,
      default: 1,
    },
    showType: {
      type: String,
      default: '',
    },
    showWord: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      input: '',
      platform: localStorage.platform,
    }
  },
  computed: {},
  filters: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    recordend(li) {
      let resData = JSON.parse(li)
      this.listData.entryCont = this.listData.entryCont + resData.entryCont
      this.$forceUpdate()
    },
    // 删除录音
    deleteVoice(e) {
      this.listData.audioList.splice(
        this.listData.audioList.findIndex(item => item.id === e.id),
        1
      )
    },
    loseFocus(val) {
      this.listData.entryCont = val
    },
    removeHtmlStyle(html) {
      let rel = /style\s*?=\s*?([‘"])[\s\S]*?\1/g
      let newHtml = ''
      if (html) {
        newHtml = html.replace(rel, '')
      }
      return newHtml
    },
    deleteSug(val) {
      if (this.showType == 'suggset') {
        this.$emit('deleteSug', val - 1)
      }
    },
    Title(val) {
      let i = val ? (val < 10 ? '0' + val : val) : val
      if (this.showWord) {
        return '问题建议 ' + i
      } else {
        return i
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.entry_sound {
  border-radius: 2px;
  background-color: #ffffff;
  display: flex;
  // align-items: center;
  .box {
    flex: 1;
  }
  // 标题
  .list_text_title {
    font-size: 14px;
    font-weight: bold;
    color: #a57d60;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 14px 6px 16px;
    .text {
      background-image: linear-gradient(#ffffff 50%, #f9f1e8);
    }
    .handle-btn {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      span {
        margin: 0 10px;
      }
    }
    .delete {
      display: flex;
      align-items: center;
      font-size: 12px;
      font-weight: normal;
      color: #4b79bb;
      .icon {
        // font-size: 14px;
        color: #4b79bb;
      }
    }
  }
  .list_text_box {
    flex: 1;
    padding: 10px 5px;
    padding-left: 18px;

    .voice_box {
      width: 100%;
    }
    .entry_cont {
      line-height: 21px;
      color: #333;
      word-break: break-all;
      user-select: text;
      -webkit-user-select: text;
      -moz-user-select: text;
      -ms-user-select: text;
    }
    .scroe_input {
      padding: 0 5px;
      width: 100%;
      height: auto;
      line-height: 21px;
      font-size: 13px;
      resize: none;
    }
  }

  .list_voice_box {
    border-left: 1px solid #efefef;
    width: 80px;
  }
}
</style>
